{% extends 'layouts/default/page.html' %}

{% load bootstrap4 %}
{% load i18n %}

{% block content %}
<!-- your_template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load Data Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 确保引入 jQuery -->
</head>
<body>

<button id="load-data-btn">加载数据</button>
<div id="data-container"></div> <!-- 用于显示加载的数据 -->

<script>
    $(document).ready(function() {
        $('#load-data-btn').click(function() {
            $.ajax({
                url: "{% url 'accounts:load_data' %}",  // 使用 Django 的 URL 反向解析
                method: "GET",
                success: function(data) {
                    console.log(1231234);
                    // 清空容器
                    $('#data-container').empty();
                    // 循环遍历数据并添加到容器中
                    data.forEach(function(item) {
                        console.log(item);
                        $('#data-container').append(
                            '<p>用户: ' + item.user__username + '</p>' +
                            '<p>创建时间: ' + item.created_at + '</p>' +
                            '<p>激活码: ' + item.code + '</p>' +
                            '<p>邮箱: ' + item.email + '</p><hr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error("发生错误: " + error);
                }
            });
        });
    });
</script>

</body>
</html>


{% endblock %}
